<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
			<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=tLfmkn3SLUPSEPNKAn83pApq0bg5sziI"></script>
		<style type="text/css">
			.swiper-container-teacher{
				width: 100%;
				height: 12rem;
			}
			.major-box{
				margin: 0.625rem 0.625rem;
				padding: 0.625rem 0.6125rem;
				background-color: white;
				border-radius: 0.625rem;
			}
			.major-box p{
				text-indent: 2em;
				margin-bottom: 0.625rem;
			}
			.major-box .title{
				display: inline-block;
				font-weight: bold;
				border-right: 0.3125rem solid #01eabb;
				padding-right: 0.25rem;
				margin-bottom: 0.625rem;
			}
			.major-box .describe>div{
				font-size: 0.875rem;
				margin-bottom: 0.5rem;
			}
			.major-box.rongyu .rongyuimg{
				width: 90%;
				margin: auto;
				display: block;
			}
			.swiper-tese{
				height: 14rem;
			}
			.swiper-tese .swiper-slide{
				position: relative;
			}
			.swiper-tese .content{
				position: absolute;
				bottom: 0rem;
				width: 100%;
				padding: 6px;
				color: white;
				background: rgba(10,100,100,0.5);
				left: 0rem;
			}
			.swiper-tese .content span{
				/* color: #007AFF; */
			}
			.swiper-tese .describe p{
				text-indent: inherit;
			}
			.major-box .zongzhi{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			.major-box .zongzhi img{
				width: 22%;
			}
			.mubiao-img-box{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.mubiao-img-box .mubiao-img{
				width: 30%;
				height: 6.25rem;
				max-height: 8.75rem;
			}
		</style>
	</head>
	<body>
	<header>
		<div class="logo-box">
			<div class="logo-name"></div>
			<div class="slogan"></div>
		</div>
		<div class="logo-img">
			<img src="/home/img/true.jpg" >
		</div>
	</header>
		<div class="navbar-box">
			<ul class="navbar">
				<li><a href="/index.html">首页</a></li>
				<li><a href="jianjie.html" class="active">简介</a></li>
				<li><a href="major.html">专业</a></li>
				<li><a href="shizi.html">师资</a></li>
				<li><a href="huanjing.html">环境</a></li>
				<li><a href="jiuye.html">就业</a></li>
				<li><a href="xinwen.html">新闻</a></li>
				<li><a href="wenda.html">问答</a></li>
			</ul>
		</div>
		<div class="swiper-container" id="lunbo">
		  <div class="swiper-wrapper">
		    <!-- <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner4.jpg" ></div>
		    <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner5.jpg" ></div>
		    <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner6.jpg" ></div> -->
		  </div>
		  <!-- Add Arrows -->
		 <!-- <div class="swiper-button-next"></div>
		  <div class="swiper-button-prev"></div> -->
		</div>
		<div class="major-box jieshao">
			<div class="title"></div>
		</div>
		<div class="major-box rongyu">
			<div class="title"></div>
		</div>
		<div class="major-box tese">
			<div class="title"></div>
		</div>
		<div class="major-box mubiao">
			<div class="title"></div>
		</div>
		<div class="major-box banxuezongzhi">
			<div class="title"></div>
		</div>
		<style type="text/css">
			.major-box .lianxi{
				width: 4.25rem;
				text-align: center;
				font-weight: bold;
				border-bottom: 0.3125rem solid #01eabb;
				padding-bottom: 0.25rem;
				margin-bottom: 0.625rem;
			}
			#map{
				height: 12.5rem;
			}
			.info-box img{
				width: 1rem;
				margin-right: 0.625rem;
			}
		</style>
		<div class="major-box">
			<div class="lianxi">联系我们</div>
			<div id="map"></div>
			<div class="info-box">
				<!-- <div class="tel"><img src="img/duanxin.png"><span>400-6655-720</span> </div> -->
				<div class="msg"><img src="img/phone.png" ><span></span></div>
				<div class="position"><img src="img/position.png" ><span></span></div>
			</div>
		</div>
		<footer>
			<div class="" style="padding: 0rem 0.625rem;">
				<div id="address"></div>
				<div><img src="" id="qrcode" ></div>
			</div>
			<div id="beian" style="text-align: center;font-size: 0.75rem;display: block;color: #ccc;"></div>
		</footer>
		<!-- 底部导航 -->
		<div id="fixBottom">
			<ul>
				<li class="telzixun"><a href="tel:10000" id="tel"><img src="img/tel.png" ><div>电话咨询</div></a></li>
				<!-- <li class="baoming"><a href="tencent://message/?uin=1014167202&Site=在线QQ&Menu=yes"><img src="img/msg.png"><div>在线报名</div></a></li> -->
				<li class="baoming"><a href="leavemsg.html"><img src="img/msg.png"><div>在线报名</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/qq.png" ><div>报名咨询</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/fee.png" ><div>学费咨询</div></a></li>
				<!-- <li class="qqzixin"><a href="https://wpa1.qq.com/JEFqRGvh?_type=wpa&qidian=true"><img src="img/qq.png" ><div>QQ咨询</div></a></li>
				<li class="feezixun"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img src="img/fee.png" ><div>学费咨询</div></a></li> -->
			</ul>
		</div>
	</body>
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// 网页轮播
	getLunbo("jianjie");
	
		// 请求服务器数据
		$.ajax({
			url:"/h5/content/getModuleContent?parentName=jianjie",
			success:function(res){
				if(res.code==200){
					showJieshao(res.data[0]);
					showRongyu(res.data[1]);
					showTese(res.data[4]);
					showZongzhi(res.data[3]);
					showMubiao(res.data[2]);
				}
			}
		})
		
		function showJieshao(data){
			$(".jieshao .title").html(data.key);
			let t="";
			if(data.value.length>0){
				t = `<div class="jianjie">${data.value[0].content}
						</div>`;
			}			
			$(".jieshao").append(t);
		}
		function showRongyu(data){
			$(".rongyu .title").html(data.key);
			let s="";
			if(data.value.length>0)
			 s=`
						<div class="describe">${data.value[0].description}</div><div><img class="rongyuimg" src="/upload/${data.value[0].content}"></div>`;
			$(".rongyu").append(s);
		}
		function showMubiao (data) {
			$(".mubiao .title").html(data.key);
			let s =`
						<div class="mubiao-img-box">
							`;
			for (let i = 0; i < data.value.length; i++) {
				s+=`<img class="mubiao-img" src="/upload/${data.value[i].content}" >`;
			}
			s+='</div>';
			$(".mubiao").append(s);	
		}
		function showTese(data){
			$(".tese .title").html(data.key);
			let s = `
			<div class="swiper-container swiper-tese">
			  <div class="swiper-wrapper">
			  `;
			for (let i = 0; i < data.value.length; i++) {
				let n ="一";
				switch(i){
					case 0:n="一";break;
					case 1:n="二";break;
					case 2:n="三";break;
					case 3:n="四";break;
					case 4:n="五";break;
					case 5:n="六";break;
					case 6:n="七";break;
					case 7:n="八";break;
					case 8:n="九";break;
				}
				s+=`<div class="swiper-slide">
						<img src="/upload/${data.value[i].content}" >
						<div class="content">
							<div class="header"><span>特色${n}：</span>${data.value[i].title}</div>
							<div class="describe">${data.value[i].description}</div>
						</div>
					</div>`;
			}
			s+=`</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>`;
			$(".tese").append(s);
			var swiper2 = new Swiper('.swiper-tese', {
				autoplay: true,//可选选项，自动滑动
				loop:true,
			 navigation: {
			   nextEl: '.swiper-button-next',
			   prevEl: '.swiper-button-prev',
			 },
			});
		}
		function showZongzhi(data){
			$(".banxuezongzhi .title").html(data.key);
			let s =`<div class="zongzhi">`;
			for (let i = 0; i < data.value.length; i++) {
				s+=`<img class="zongzhi-img" src="/upload/${data.value[i].content}" >`;
			}
			s+='</div>';
			$(".banxuezongzhi").append(s);	
		}
		// 显示地图
		$(function () {
			let zuobiao = localStorage.getItem("zuobiao");
			let arr = zuobiao.split(",");
			let jingdu = arr[0];
			let weidu = arr[1];
			var map = new BMapGL.Map("map");    // 创建Map实例
			map.centerAndZoom(new BMapGL.Point(jingdu, weidu), 15);  // 初始化地图,设置中心点坐标和地图级别
			// map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
			map.addControl(zoomCtrl);
			map.disableDragging();     //禁止拖拽
			 var marker = new BMapGL.Marker(new BMapGL.Point(jingdu, weidu));
			map.addOverlay(marker); // 增加点
		});
	</script>
</html>
